{% extends "base.html" %}
{% load static %}

{% block title %}
{{ article.title }}
{% endblock title %}

{% block content %}
<div class="container">
    <div class="row">
        <!-- 左侧文章主体 -->
        <div class="col-9">
            <!-- 标题及作者 -->
            <h1 class="mt-4 mb-4">{{ article.title }}</h1>
            <div class="alert alert-success">
                <div class="d-flex justify-content-between align-items-center">
                    <span>
                        <!-- <i class="fas fa-user"></i>  -->
                        {% if user.profile.avatar %}
                        <img src="{{ user.profile.avatar.url }}" class="rounded-circle mr-2"
                            style="width: 30px; height: 30px; object-fit: cover;">
                        {% else %}
                        <img src="{% static 'images/default_avatar.png' %}" class="rounded-circle mr-2"
                            style="width: 30px; height: 30px; object-fit: cover;">
                        {% endif %}
                        {{ article.author }}
                        {% if user == article.author %}
                        <span class="ml-2">
                            <a class="btn btn-sm btn-danger confirm-delete" href="#" onclick="confirm_safe_delete()">
                                <i class="fas fa-trash"></i> 删除
                            </a>
                            <a class="btn btn-sm btn-primary" href="{% url 'article:article_update' article.id %}">
                                <i class="fas fa-edit"></i> 编辑
                            </a>
                        </span>
                        {% endif %}
                    </span>
                    <span>
                        <i class="fas fa-eye"></i> {{ article.total_views }}
                    </span>
                </div>
            </div>

            <!-- 文章正文 -->
            <div class="article-body mt-4 mb-4">
                {{ article.body|safe }}
            </div>

            <!-- 发表评论 -->
            <div class="comment-area card mt-4">
                <div class="card-body">
                    {% if user.is_authenticated %}
                    <h4 class="card-title">发表评论</h4>
                    <!-- 添加加载状态显示 -->
                    <div id="comment-loading" class="comment-form-loading">
                        <div class="spinner-border text-primary" role="status">
                            <span class="sr-only">加载中...</span>
                        </div>
                    </div>
                    <form id="comment-form" action="{% url 'comment:post_comment' article.id %}" method="POST"
                        class="comment-form-hidden">
                        {% csrf_token %}
                        <div class="form-group">
                            <div>
                                {{ comment_form.media }}
                                {{ comment_form.body }}
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary mt-2">
                            <i class="fas fa-paper-plane"></i> 发表评论
                        </button>
                    </form>

                    {% else %}
                    <div class="text-center py-2">
                        <p class="mb-0">
                            请<a href="{% url 'account_login' %}" class="text-primary">登录</a>后发表评论
                        </p>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- 评论列表 -->
            <div class="comment-list mt-4">
                <h4 class="mb-4">
                    <i class="fas fa-comments"></i> 评论列表
                    <small class="text-muted">（{{ comments.count }}条）</small>
                </h4>

                {% for comment in comments %}
                <div class="comment-item card mb-3">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-2">

                            <div class="user-info">
                                {% if user.profile.avatar %}
                                <img src="{{ user.profile.avatar.url }}" class="rounded-circle mr-2"
                                    style="width: 30px; height: 30px; object-fit: cover;">
                                {% else %}
                                <img src="{% static 'images/default_avatar.png' %}" class="rounded-circle mr-2"
                                    style="width: 30px; height: 30px; object-fit: cover;">
                                {% endif %}
                                <span class="font-weight-bold text-primary">{{ comment.user }}</span>
                            </div>
                            <div class="d-flex align-items-center">
                                <small class="text-muted mr-3">
                                    <i class="fas fa-clock"></i>
                                    {{ comment.created|date:"Y-m-d H:i" }}
                                </small>
                                {% if user == comment.user or user.is_superuser %}
                                <form class="d-inline delete-comment-form"
                                    action="{% url 'comment:delete_comment' comment.id %}" method="post"
                                    data-comment-id="{{ comment.id }}">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-link text-danger p-0">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                </form>
                                {% endif %}
                            </div>
                        </div>
                        <div class="comment-content">
                            {{ comment.body|safe }}
                        </div>
                    </div>
                </div>
                {% empty %}
                <div class="empty-comment text-center py-5">
                    <i class="fas fa-comments text-muted" style="font-size: 4rem;"></i>
                    <p class="mt-3 text-muted">暂无评论</p>
                </div>
                {% endfor %}
            </div>
        </div>

        <!-- 右侧目录 -->
        <div class="col-3 mt-4">

            <div class="sidebar">
                <div class="sidebar__inner">

                    <div class="toc">
                        <div class=" mb-4">
                            <!-- 标签 -->
                            <h4><i class="fas fa-tag"></i> 标签</h4>
                            <span margin: 5px 0;">
                                {% for tag in article.tags.all %}
                                <a href="{% url 'article:article_list' %}?tag={{ tag }}"
                                    style="margin-right: 5px; display: inline-block;">
                                    {{ tag }}
                                </a>
                                {% endfor %}
                            </span>
                        </div>
                        <h4><i class="fas fa-list"></i> 目录</h4>

                        <hr>
                        {{ toc|safe }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 添加图片查看模态框 -->
<div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header"
                style="display: flex;justify-content: space-between;padding-right: 2vw;padding-left: 2vw;">
                <h5 class="modal-title">图片查看</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"><svg t="1730947652014" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="4271" width="20" height="20">
                            <path
                                d="M859.04 439.52v364.48c0 13.28-10.72 24-24 24H478.72V463.52c0-13.28 10.72-24 24-24h356.32z"
                                fill="#B3C8FE" p-id="4272"></path>
                            <path
                                d="M704.32 196H251.04c-13.28 0-24 10.72-24 24v453.28c0 13.28 10.72 24 24 24h130.72c13.28 0 24-10.72 24-24V374.72h298.56c13.28 0 24-10.72 24-24v-130.72c0-13.28-10.72-24-24-24z m-322.56 130.72c-13.28 0-24 10.72-24 24v298.56h-82.72V244h405.28v82.72H381.76z"
                                fill="#5186F5" p-id="4273"></path>
                            <path
                                d="M835.04 326.72H381.76c-13.28 0-24 10.72-24 24v453.28c0 13.28 10.72 24 24 24h453.28c13.28 0 24-10.72 24-24V350.72c0-13.28-10.72-24-24-24z m-24 453.28H405.76V374.72h405.28v405.28z"
                                fill="#5186F5" p-id="4274"></path>
                            <path d="M487.584 664.416l207.952-207.952 33.92 33.952-207.936 207.936z" fill="#5186F5"
                                p-id="4275"></path>
                            <path d="M487.472 490.304l33.936-33.952L729.36 664.32l-33.952 33.936z" fill="#5186F5"
                                p-id="4276"></path>
                        </svg></span>
                </button>
            </div>
            <div class="modal-body text-center">
                <img src="" class="img-fluid" id="modalImage">
            </div>
        </div>
    </div>
</div>


<style>
    /* 删除按钮样式 */
    .delete-comment {
        opacity: 0;
        transition: opacity 0.2s ease;
        font-size: 0.9rem;
    }

    .comment-item:hover .delete-comment {
        opacity: 1;
    }

    .delete-comment:hover {
        color: #dc3545 !important;
        text-decoration: none;
    }

    /* 评论框加载状态 */
    .comment-form-loading {
        min-height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8f9fa;
        border-radius: 4px;
    }

    /* 隐藏原始评论框，直到 CKEditor 完全加载 */
    .comment-form-hidden {
        display: none;
    }

    /* 添加评论内容区域的样式 */
    .comment-content {
        /* 设置最大高度，超出部分显示滚动条 */
        max-height: 500px;
        overflow-y: auto;
        /* 添加一些内边距 */
        padding: 10px 0;
    }

    /* 限制评论中图片的最大尺寸 */
    .comment-content img {
        max-width: 100%;
        height: auto;
        /* 可选：添加一些外边距 */
        margin: 10px 0;
    }
    /* 美化滚动条（可选） */
    .comment-content::-webkit-scrollbar {
        width: 2px;
    }

    .comment-content::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .comment-content::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }

    .comment-content::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    /* 评论内容区域的样式 */
    .comment-content {
        padding: 10px 0;
    }

    /* 评论中图片的样式 */
    .comment-content img {
        max-width: 100%;
        height: auto;
        margin: 10px 0;
        cursor: pointer;
        /* 鼠标变为手型 */
        transition: opacity 0.3s;
        /* 添加悬停效果 */
    }

    .comment-content img:hover {
        opacity: 0.8;
    }

    /* 添加图片放大提示 */
    .comment-content img::after {
        content: '🔍';
        position: absolute;
        right: 10px;
        top: 10px;
    }

    /* 自定义模态框样式 */
    .modal-dialog {
        max-width: 90%;
        /* 更大的模态框 */
    }

    /* 模态框中的图片最大高度 */
    #modalImage {
        max-height: 80vh;
        /* 视窗高度的80% */
    }

    /* 可选：添加图片加载动画 */
    #modalImage {
        opacity: 0;
        transition: opacity 0.3s;
    }

    #modalImage.loaded {
        opacity: 1;
    }
</style>
{% endblock content %}

{% block css %}
<!-- 添加 Markdown 样式 -->
<link rel="stylesheet" href="{% static 'md_css/markdown.css' %}">
{% endblock css %}

{% block script %}
<script src="{% static 'js/article.js' %}"></script>

<!-- 删除文章的确认框 -->
<script>
    function confirm_safe_delete() {
        layer.confirm('确认删除这篇文章吗？', {
            btn: ['确认', '取消'],
            title: '提示'
        }, function (index) {
            $('form#safe_delete button').click();
            layer.close(index);
        });
    }

    // 添加删除评论的处理函数
    $(document).ready(function () {
        $('.delete-comment').click(function (e) {
            e.preventDefault();
            var commentId = $(this).data('comment-id');

            layer.confirm('确认删除这条评论吗？', {
                btn: ['确认', '取消'],
                title: '提示'
            }, function (index) {
                // 发送删除请求
                $.ajax({
                    url: '/comment/delete-comment/' + commentId + '/',
                    type: 'POST',
                    data: {
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                    },
                    success: function (response) {
                        if (response.status === 'success') {
                            // 删除成功，移除评论元素
                            $('[data-comment-id="' + commentId + '"]').closest('.comment-item').fadeOut(300, function () {
                                $(this).remove();
                                // 更新评论数量
                                var count = $('.comment-item').length;
                                $('.comment-list h4 small').text('（' + count + '条）');
                                // 如果没有评论了，显示空评论提示
                                if (count === 0) {
                                    $('.comment-list').append(`
                                        <div class="empty-comment text-center py-5">
                                            <i class="fas fa-comments text-muted" style="font-size: 4rem;"></i>
                                            <p class="mt-3 text-muted">暂无评论</p>
                                        </div>
                                    `);
                                }
                            });
                            layer.msg('评论已删除');
                        } else {
                            layer.msg('删除失败：' + response.message);
                        }
                    },
                    error: function () {
                        layer.msg('删除失败，请稍后重试');
                    }
                });
                layer.close(index);
            });
        });
    });

    // 直接执行延时函数
    window.onload = function () {
        console.log('Window loaded'); // 调试用
        setTimeout(function () {
            console.log('Timeout triggered'); // 调试用
            var loadingElement = document.getElementById('comment-loading');
            var formElement = document.getElementById('comment-form');

            if (loadingElement && formElement) {
                loadingElement.style.display = 'none';
                formElement.classList.remove('comment-form-hidden');
                console.log('Elements updated'); // 调试用
            } else {
                console.log('Elements not found'); // 调试用
            }
        }, 300);
    }
    //放大查看评论中的图片
    $(document).ready(function () {
        // 为评论中的所有图片添加点击事件
        $('.comment-content img').click(function () {
            var imgSrc = $(this).attr('src');
            $('#modalImage').attr('src', imgSrc).on('load', function () {
                $(this).addClass('loaded');
            });
            $('#imageModal').modal('show');
        });

        // 模态框关闭时重置图片
        $('#imageModal').on('hidden.bs.modal', function () {
            $('#modalImage').removeClass('loaded');
        });

        // ESC 键关闭模态框
        $(document).keydown(function (e) {
            if (e.keyCode === 27) {
                $('#imageModal').modal('hide');
            }
        });
    });
</script>

{% endblock script %}